<!DOCTYPE html>
<html>
<head>
    {include file='public/meta'/}

    <link rel="stylesheet" href="__STATIC_URL__/static/css/bootstrapSwitch.css">

    <link rel="stylesheet" href="__STATIC_URL__/static/css/addmchat.css"/>
    <link rel="stylesheet" href="__STATIC_URL__/static/css/creatcard.css"/>

    <link rel="stylesheet" type="text/css" href="__STATIC_URL__/static/css/bootstrap-datetimepicker.css"/>
    <script src="__STATIC_URL__/static/js/bootstrap-datetimepicker.js" type="text/javascript" charset="utf-8"></script>
    <style>
        .filePicker{
            margin-top: -5px;
            width: 150px;
            height: 44px;
            background: #00A2D4;
            color: #fff;
            text-align: center;
            line-height: 44px;
            border-radius: 4px;
            cursor: pointer;
        }
        .file{
            position: absolute;
            left: 14px;
            top: -5px;
            width: 150px;
            height: 44px;
            line-height: 44px;
            opacity: 0;
            cursor: pointer;
        }
        .img-file{
            width: 100px;
            height: 100px;
            display: block;
            margin-left: 26px;
            margin-top: 10px;
            display: none;
        }
        .form-control{
            width: 50%;
        }
        .has-switch span, .has-switch label{
            height: auto;
        }
        .color-list li.selected {
            border: 2px solid #FF0000;
            margin: 3px;
            padding: 10px;
        }
        .color-list li {
            width: 20px;
            height: 20px;
            float: left;
            margin: 5px;
            cursor: pointer;
            list-style: none;
        }
        .ng-scope input {
            width: 82px;
            height: 34px;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            cursor: pointer;
        }

    </style>
</head>
<body>
{include file='public/header'/}
<!------------------导航-------------------------->
<section>
    {include file='public/left'/}
    <!--------------------------主要内容区域------------------------------------->
    <div class="content">
        <div class="page-heading mgl15 mgr15">
            <ul class="breadcrumb">
                <li>当前位置是&nbsp;:</li>
                <li>
                    <a href="{:url('cards/cardslist')}">卡券管理</a>
                </li>
                <li>
                    <a href="javascript:history.back();">卡券列表</a>
                </li>
                <li class="active" style="color: #02b87f;">立减设置</li>
            </ul>
        </div>
        <div class="panel mgr15 mgl15">
            <div class="panel-heading addCharts" style="background:#ededed;">
                卡券
            </div>
            <div class="panel-body">
                <div class="panel panel-default" id="step1">
                    <div class="panel-body">
                        <div class="pull-left" style="width:360px;position:absolute;margin-right:20px;border:1px solid #E7E7EB">
                            <div class="card_section area" style="position: relative;background-color: {:getcolor($card['color'])} ;">
                                <div class="shop-panel" id="color-purview" style="position:relative;height:180px;background-size: cover;border-radius:0px;background: #fff;">
                                    <div class="logo-area">
                                        <div class="logo"  style="text-align: center;width: 100%;height: auto;border:0;margin: 0">
                                            <img src="{$card.logo_url}" class="logopic" style="margin:0;border: #dedede solid 1px;">
                                        </div>
                                        <div class="cardname" style="text-align: center;padding: 10px">
                                            <p class="brand_name" style="margin-top: 50px;color: #000;">{$base.brand_name}</p>
                                            <p style="font-size:18px;color: #000;" class="kqmc">{$card.title}</p>
                                            <p style="background-color: {:getcolor($card['color'])} ;padding: 5px 10px;border-radius: 5px;color: #fff;" class="ljsy"><span>用券买单</span></p>
                                        </div>

                                        <div class="clear"></div>
                                    </div>
                                    <div class="msg-area">

                                    </div>
                                    <div class="chakandetail">

                                    </div>
                                </div>

                            </div>
                            <div class="shop-detail">
                                <ul class="list">
                                    <li>
                                        <div class="li-panel area">
                                            <div class="li-content">卡券详情</div>
                                            <span class="ricon glyphicon glyphicon-chevron-right"></span>
                                            <div class="cicon">
                                                <a href="javascript:;" data-id="form3"><i class="fa fa-pencil"></i></a>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="li-panel area">
                                            <div class="li-content">公众号</div>
                                            <span class="ricon glyphicon glyphicon-chevron-right"></span>
                                            <div class="cicon">
                                                <a href="javascript:;" data-id="form4"><i class="fa fa-pencil"></i></a>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="alert form form-area" style="position: relative;margin-left:370px;display: block; margin-top: 0.5px;" id="form1">
                            <div class="arrow_in"></div>
                            <h4  class="card_title_detail">基本信息</h4>

                            <form class="form-horizontal adminex-form" action="" id="creatcard" method="post">
                            <input name="card_id" type="hidden" value="{$card.card_id}">

                                <div class="form-group">
                                    <label class="col-xs-12 col-sm-4 col-md-4 control-label">
                                        活动封面的背景颜色：<span class="glyphicon glyphicon-asterisk glyphicon-tip"></span>
                                    </label>
                                    <div class="col-sm-8 col-xs-12">
                                        <div class="cover" id="colors">
                                            <input type="hidden" name="activity_bg_color" value="#63b359;" required>
                                            <ul class="color-list clearfix">
                                                <li class="selected" style="background-color:#63b359;" data-color="#63b359"></li>
                                                <li style="background-color:#2c9f67;" data-color="#2c9f67"></li>
                                                <li style="background-color:#509fc9;" data-color="#509fc9"></li>
                                                <li style="background-color:#5885cf;" data-color="#5885cf"></li>
                                                <li style="background-color:#9062c0;" data-color="#9062c0"></li>
                                                <li style="background-color:#d09a45;" data-color="#d09a45"></li>
                                                <li style="background-color:#e4b138;" data-color="#e4b138"></li>
                                                <li style="background-color:#ee903c;" data-color="#ee903c"></li>
                                                <li style="background-color:#f08500;" data-color="#f08500"></li>
                                                <li style="background-color:#a9d92d;" data-color="#a9d92d"></li>
                                                <li style="background-color:#dd6549;" data-color="#dd6549"></li>
                                                <li style="background-color:#cc463d;" data-color="#cc463d"></li>
                                                <li style="background-color:#cf3e36;" data-color="#cf3e36"></li>
                                                <li style="background-color:#5E6671" data-color="#5E6671"></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-xs-12 col-sm-4 col-md-4 control-label">小程序APPID：<span class="glyphicon glyphicon-asterisk glyphicon-tip"></span></label>
                                    <div class="col-sm-8 col-xs-12">
                                        <input type="text" class="form-control" name="activity_tinyappid" required>
                                        <div class="help-block">领取立减金打开的小程序APPID。</div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-xs-12 col-sm-4 col-md-4 control-label">开始日期：<span class="glyphicon glyphicon-asterisk glyphicon-tip"></span></label>
                                    <div class="col-sm-8 col-xs-12 coupon-color">
                                        <input type="text" class="form-control" id='beg_time' required name='begin_time' readonly="readonly" placeholder="选择有效开始时间">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-xs-12 col-sm-4 col-md-4 control-label">结束日期：<span class="glyphicon glyphicon-asterisk glyphicon-tip"></span></label>
                                    <div class="col-sm-8 col-xs-12 coupon-color">
                                        <input type="text" class="form-control" id='end_time' required name='end_time' readonly="readonly" placeholder="选择有效结束时间">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-xs-12 col-sm-4 col-md-4 control-label">支付最小金额：<span class="glyphicon glyphicon-asterisk glyphicon-tip"></span></label>
                                    <div class="col-sm-8 col-xs-12 coupon-color">
                                        <div class="clearfix">
                                            <input type="text" class="form-control pull-left" name="min_amt" style="width: 200px;" required>
                                            <span class="pull-left" style="padding-top:4px">元</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-xs-12 col-sm-4 col-md-4 control-label">单用户活动期间最大领取次数：<span class="glyphicon glyphicon-asterisk glyphicon-tip"></span></label>
                                    <div class="col-sm-8 col-xs-12 coupon-color">
                                        <div class="clearfix">
                                            <input type="text" class="form-control pull-left" name="max_partic_times_act" style="width: 200px;" required>
                                            <span class="pull-left" style="padding-top:4px">张</span>
                                        </div>
                                        <div class="help-block col-sm-12 col-xs-12" style="padding: 0;">最大为50，不填默认为1</div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-xs-12 col-sm-4 col-md-4 control-label">单用户活动期间单日最大领取次数：<span class="glyphicon glyphicon-asterisk glyphicon-tip"></span></label>
                                    <div class="col-sm-8 col-xs-12 coupon-color">
                                        <div class="clearfix">
                                            <input type="text" class="form-control pull-left" name="max_partic_times_one_day" style="width: 200px;" required>
                                            <span class="pull-left" style="padding-top:4px">张</span>
                                        </div>
                                        <div class="help-block col-sm-12 col-xs-12" style="padding: 0;">最大为50，不填默认为1</div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-xs-12 col-sm-4 col-md-4 control-label">单个礼包社交立减金数量（3-15个）：<span class="glyphicon glyphicon-asterisk glyphicon-tip"></span></label>
                                    <div class="col-sm-8 col-xs-12 coupon-color">
                                        <div class="clearfix">
                                            <input type="text" class="form-control pull-left" name="gift_num" style="width: 200px;" required>
                                            <span class="pull-left" style="padding-top:4px">张</span>
                                        </div>
                                        <div class="help-block col-sm-12 col-xs-12" style="padding: 0;">领取人可邀请数量</div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-xs-12 col-sm-4 col-md-4 control-label">领取限制：<span class="glyphicon glyphicon-asterisk glyphicon-tip"></span></label>
                                    <div class="col-sm-8 col-xs-12 coupon-color">
                                    <label class="radio-inline">
                                        <input type="radio" name="is_type" checked id="inlineRadio1" value="1"> 指定的会员卡用户
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="is_type" id="inlineRadio2" value="2"> 指定小程序新用户
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="is_type" id="inlineRadio3" value="3"> 指定为所有用户
                                    </label>
                                    </div>
                                </div>


                                <div style="text-align: center">
                                    <button type="submit" class="btn btn-primary">添加</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                {include file='public/footer'/}
            </div>
</section>
</body>
<script src="__STATIC_URL__/static/js/bootstrapSwitch.js"></script>
<script>
    function upload(file) {
        var formData = new FormData();
        formData.append('file', $('#' + file)[0].files[0]);
        formData.append('other',file);
        $.ajax({
            url: "{:url('uploads/upload')}",
            type: 'POST',
            cache: false,
            data: formData,
            processData: false,
            contentType: false,
        }).done(function (res) {
            $("."+file).attr("src",res.pic);
            $("#logo_url").val(res.pic);
        }).fail(function (res) {
            alert("上传失败")
        });
    }
    $("#creatcard").submit(function(){
        var start = $("#beg_time").val();
        var end = $("#end_time").val();
        if(start==""){
            alert("请选择开始时间");
            return false;
        }
        if(end==""){
            alert("请选择结束时间");
            return false;
        }
    });
    //数据绑定
    function binding(id,name){
        var val = $("#"+id).val();
        if(val==""){
            val=name
        }
        $("."+id).text(val)
    }
    $(function () {
        $('#beg_time').datetimepicker({
            startDate:new Date(),
//            minView: "month", //选择日期后，不会再跳转去选择时分秒
            language: 'zh-CN',
            format: 'yyyy-mm-dd h:i:s',
            todayBtn: 1,
            autoclose: 1,
            todayHighlight: true,
        }).on('changeDate', function (ev) {
            var starttime = $('#beg_time').val();
            var endtime = $('#end_time').val();
            if (starttime != "" && endtime != "") {
                var startD = new Date(Date.parse(starttime.replace(/-/g, "/")));
                var endD = new Date(Date.parse(endtime.replace(/-/g, "/")));
                if (endtime <= starttime) {
                    $('#beg_time').val('');
                    alert('结束时间必须大于大于时间');
                    return;
                }
                ;
                $("#end_time").datetimepicker('setStartDate', starttime);
                $("#beg_time").datetimepicker('hide');
            }
        });
        $('#end_time').datetimepicker({
            startDate:new Date(),
//            minView: "month", //选择日期后，不会再跳转去选择时分秒
            language: 'zh-CN',
            format: 'yyyy-mm-dd h:i:s',
            todayBtn: 1,
            autoclose: 1,
            todayHighlight: true,
        }).on('changeDate', function (ev) {
            var starttime = $('#beg_time').val();
            var endtime = $('#end_time').val();
            if (starttime != "" && endtime != "") {
                var startD = new Date(Date.parse(starttime.replace(/-/g, "/")));
                var endD = new Date(Date.parse(endtime.replace(/-/g, "/")));
                if (endtime <= starttime) {
                    $('#end_time').val('');
                    alert('结束时间必须大于开始时间');
                    return;
                }
                $("#beg_time").datetimepicker('setEndDate', endtime);
                $("#end_time").datetimepicker('hide');
            }
        });
    });

    $(function () {
//        选取优惠券背景颜色
        $(".color-list li").click(function() {
            $(".color-list li").removeClass("selected");
            $(this).addClass("selected");
            var colors = $(this).attr("data-color");
            $(".card_section").css("background-color", colors);
            $(".ljsy").css("background-color", colors);
            $("input[name='color']").val(colors);
        });
//        选取卡券类型
        $("#quan-type button").click(function(){
            var val = $(this).attr("data-id");
            $("#quan-type button").removeClass("active");
            $(this).addClass("active");
            $("#type").val(val);
            $(".yh-type").addClass("hide");
            $(".requireds").removeAttr("required");
            if(val==1){
                $("#yh-money").removeClass("hide")
                $("#least_cost").attr("required","required");
                $("#reduce_cost").attr("required","required");
            }else if(val==2){
                $("#yh-discount").removeClass("hide");
                $("#discount").attr("required","required");
            }else{
                $("#yh-jieshao").removeClass("hide");
                $("#conten").attr("required","required");
            }
        });

    });
    $("#share").on('switch-change', function (e, data) {
        var $el = $(data.el), value = data.value;
        if(value==true){
            $("#can_share").val(1);
        }else{
            $("#can_share").val(0);
        }
    });
    $("#give").on('switch-change', function (e, data) {
        var $el = $(data.el), value = data.value;
        if(value==true){
            $("#can_give_friend").val(1);
        }else{
            $("#can_give_friend").val(0);
        }
    });
</script>


</html>
